<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充电插座订单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    #parse('/headFiles.html')
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card layui-form" wid100>
        <div class="layui-card-header">订单基础信息</div>
        <input type="hidden" name="tradeNo" value="$!{tradeNo}"/>
        <input type="hidden" name="createDate" value="$!{utils.dateFormat($createDate,'yyyy-MM-dd HH:mm:ss')}"/>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单号</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{tradeNo}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单状态</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{stateName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付状态</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">
                                #if($payState == 1)
                                <span class="layui-badge layui-bg-black">$!{payStateName}</span>
                                #else
                                <span class="layui-badge layui-bg-green">$!{payStateName}</span>
                                #end
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备序列号</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{chargeSocketSn}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">插座号</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{slotNum}</div>
                        </div>
                    </div>
                </div>
                #if($bindNote)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">设备绑定信息</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{bindNote}</div>
                        </div>
                    </div>
                </div>
                #end
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付订单</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payTradeNo}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付方式</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payTypeName}</div>
                        </div>
                    </div>
                </div>
                #if($couponId)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">优惠信息</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{couponTitle}</div>
                        </div>
                    </div>
                </div>
                #end
            </div>
            <div class="layui-row">
                <div class="layui-col-sm3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单金额</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{moneyStr}元</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">优惠金额</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{discountMoneyStr}元</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">第三方支付</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payMoneyStr}元</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">钱包金额</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">
                            	$!{walletMoneyStr}元
                            	#if($debtMoeny > 0)
                            	<span class="layui-badge layui-bg-black">欠费$!{debtMoenyStr}元</span>
                            	#end
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">会员ID</label>
                        <div class="layui-form-mid layui-word-aux">$!{memberId}</div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">会员昵称</label>
                        <div class="layui-form-mid layui-word-aux">$!{memberName}</div>
                    </div>
                </div>
                #if($memberPhone)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">会员手机号</label>
                        <div class="layui-form-mid layui-word-aux">$!{memberPhone}</div>
                    </div>
                </div>
                #end
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">充电网点ID</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{placeId}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">充电网点名称</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{placeName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">充电地址</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{placeAreaName}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($payDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                #if($finishDate)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">完成时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($finishDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                #end
                #if($cancelDate)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">撤销时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($cancelDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                #end
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最后修改时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($updateDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($createDate,'yyyy-MM-dd HH:mm:ss')}</div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.layui-form -->
    <div class="layui-card layui-form" wid100>
        <div class="layui-card-header">收费标准及使用</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收费模式</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{costModeName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最多用时</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{maxUseTimes}分钟</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">最大充电量</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{maxUseChargeElectricity}度</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">关闭方式</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{stopModeName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用时</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{useTimesStr}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用电量</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{useChargeElectricity}度</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">收费标准</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{maxPayMoneyStr}元/小时</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($startDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                #if($endDate)
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($endDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
                #end
            </div>
        </div>
    </div>
    #if($payType != 1)
    <div class="layui-card layui-form" wid100>
        <div class="layui-card-header">$!{payTypeName}信息</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付订单</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.tradeNo}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">订单类型</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.tradeTypeName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付状态</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.payStatusName}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付金额</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.payMoneyStr}元</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">实收金额</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.receiptMoneyStr}元</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">应用类型</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.appTypeName}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">应用ID</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.appId}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户号</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.businessAccount}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm5">
                    <div class="layui-form-item">
                        <label class="layui-form-label">第三方订单号</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.externalTradeNo}</div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付时间</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{utils.dateFormat($payOrder.payDate,'yyyy-MM-dd HH:mm:ss')}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-sm6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">第三方用户ID</label>
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">$!{payOrder.payerId}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    #end
    <div class="layui-card">
        <div class="layui-card-header">插座瞬时功率</div>
        <div class="layui-card-body">
            <div id="power-panel" style="width: 100%;height:400px;"><h4>暂无数据</h4></div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">插座瞬时电流</div>
        <div class="layui-card-body">
            <div id="current-panel" style="width: 100%;height:400px;"><h4>暂无数据</h4></div>
        </div>
    </div><!-- /.layui-card -->
</div>
#parse('/footFiles.html')
<script type="text/javascript">
layui.config({
	base: '$!{webRoot}/assets/layuiadmin/'
	,webRoot:'$!{webRoot}'
}).extend({
	index: 'lib/index'
}).use(['index', 'form','echarts'],function (){
    var echarts = layui.echarts;

    function initialChartData(){
        var loadIndex = layer.msg('处理中...', {shade: [0.8, '#393D49'], time: 60 * 60 * 1000});
        $.ajax({
            async: false,
            url: '$!{webRoot}/cdcz/order/slot/instant_data/chart.data',
            data: {tradeNo:'$!{tradeNo}'},
            success: function (res) {
                layer.close(loadIndex);
                if (res.code == 200) {
                    console.log(res);
                    setPowerChartData(res.body.times, res.body.powerData);
                    setCurrentChartData(res.body.times, res.body.currentData);
                }
            }
        });
    }

    function setPowerChartData(times, data) {
        var powerPanel = document.getElementById('power-panel');
        var powerPanelChart = echarts.init(powerPanel);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: times,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                //max: data,
                min: 0,
                splitNumber: 5,
                boundaryGap: [0.2, 0.2]
            },
            series : [{
                name:'Power',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: data
            }]
        };
        powerPanelChart.setOption(option);
    }

    function setCurrentChartData(times, data) {
        var currentPanel = document.getElementById('current-panel');
        var currentPanelChart = echarts.init(currentPanel);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: times,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: 'value',
                scale: true,
                //max: data,
                min: 0,
                splitNumber: 5,
                boundaryGap: [0.2, 0.2]
            },
            series : [{
                name:'Current',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: data
            }]
        };
        currentPanelChart.setOption(option);
    }

    //初始化图表
    initialChartData();

    //事件
    var active = {
        synMemberOrder:function (){
            var tradeNo = $('input[name="tradeNo"]').val();
            layer.confirm('确定要同步会员订单吗？', function(index){
                $.ajax({
                    type: "post",
                    url: layui.setter.webRoot + '/cdcz/order/member/syn.do',
                    data:{tradeNo:tradeNo},
                    dataType:"json",
                    success:function(res){
                        if(res.code == 200){
                            layer.msg('同步成功',{icon:1});
                            table.reload('LAY-table');
                        }else{
                            layer.msg(res.msg,{icon: 5});
                        }
                    }
                });
                layer.close(index);
            });
        }
    };

    $('.layui-btn.LAY-btn-fun').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
</script>
</body>
</html>